<template>
  <div>
<!--    个人信息卡片-->
    <el-card class="box-card" style="height:20vh;width: 80%;margin:50px auto">
      <div class="userBox">
        <el-avatar class="avatar" shape="square" :size="68" fit="cover" :src="userInfo.avatar"></el-avatar>
        <div>
          <div class="userName">欢迎您，{{ userInfo.ryName }}</div>
          <div class="userDepart">{{ userInfo.ryZw ? userInfo.ryZw : "" }}</div>
        </div>
      </div>
    </el-card>
<!--    菜单-->
    <div>
      <div class="flex menu-block-box">
        <div v-for="item in menuList" class="flex-block">
          <router-link tag="div" :to="item.path" class="two-menu-block" :style="{background: item.bgColor}">
            <div class="two-menu-block-text">
              {{ item.name }}
              <div v-if="item.submenuTitle">({{ item.submenuTitle }})</div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
<!--    返回-->
    <div class="text-center" style="margin-top: 30px">
      <span class="back-block-text" @click="backIndex">返回</span>
    </div>
  </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'

export default {
  data() {
    return {
      counts: {},
      menuList: [
        {id: 1, name: '合同创建', path: '/hetongrenwu/hetong/hetongyeji/hetonghtxxdjb/index', submenuTitle: '', bgColor: '#238cbe'},
        {id: 2, name: '合同签订', path: '/hetongrenwu/hetong/hetongqianding/hetongsh/index', submenuTitle: '', bgColor: '#b95454'},
        {id: 3, name: '合同填报', path: '/hetongrenwu/hetong/hetongtb/hetongtbfq/index', submenuTitle: '', bgColor: '#437a7c'},
        {id: 3, name: '合同查看', path: '/hetongrenwu/hetong/hetongchakan/hetongck/index', submenuTitle: '', bgColor: '#6c5383'},
        {id: 2, name: '合同变更', path: '/hetongrenwu/hetong/hetongbg/zbbg/index', submenuTitle: '', bgColor: '#837979'},
      ]
    }
  },
  created() {
  },
  computed: {
    ...mapGetters(['permissions', 'userInfo'])
  },
  methods: {
    //返回首页
    backIndex(){
      this.$router.push({path: '/wel/index'})
    }
  }
}

</script>
<style scoped>
.two-menu-block {
  height: 26vh;
  text-align: center;
  /*font-size: 35px;*/
  font-size: 4vh;
  font-weight: 600;
  border-radius: 5px;
  background: #238cbe;
  color: #fff;
  display: table;
  width: 100%;
  cursor: pointer;
  background: url(/img/index/subMenu/1.png) no-repeat center center;
  background-size: cover;
  box-shadow: 0px 0px 10px #b1b1b1;
}

.two-menu-block-text {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.flex-block{
  width: 100%;
  margin: 40px 20px;
}
.menu-block-box{
  margin: 0 30px;
}
.back-block-text{
  background: #28b359;
  padding: 18px 80px;
  font-size: 3vh;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}
</style>
